<script setup lang="ts">
import { ExampleInputInstance } from '@/components/exampleInput/ExampleInputInstance';
import ExamplePopup from '@/components/examplePopup/ExamplePopup.vue';
import { examplePopupInstance } from '@/components/examplePopup/ExamplePopupInstance';


const exInstance1 = new ExampleInputInstance()
const exInstance2 = new ExampleInputInstance()


const router = useRouter()
const toTwoPage = () => {
    router.push({
        path: "/index/two_page"
    })
}
</script>
<template>
    <div class="Index">
        <div class="son">子组件1输入框：
            <ExampleInput @mounted="exInstance1.mounted" />
        </div>
        <div>子组件1取值： {{ exInstance1.inputValue }}</div>

        <div class="son">子组件2输入框：
            <ExampleInput @mounted="exInstance2.mounted" />
        </div>
        <div>子组件2取值：{{ exInstance2.inputValue }}</div>

        <div class="popup">

            <button @click="toTwoPage">去第二页</button>
            <ExamplePopup @mounted="examplePopupInstance.mounted" />
            <RouterView/>

        </div>

    </div>
</template>


<style lang="scss" scoped>
.Index {
    width: 100%;
background-color: red;
    .son {
        margin-top: 100px;
    }

}
</style>